<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" slot="detail" :rules="rules" :model="model">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="模板名称" :label-col="labelCol" :wrapper-col="wrapperCol">
              <li-select-mould v-model="model.templateId" :disabled="disabled" :version-disabled="versionDisabled"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="16">
            <a-form-model-item label="版本号"
                               :label-col="{xs: {span: 24},sm: {span: 6}}"
                               :wrapper-col="{xs: {span: 24},sm: {span: 18}}" prop="version">
              <a-input
                v-model="model.version"
                addon-before="V"
                type="Number"
                :step="0.1"
                :min="1"
                placeholder="请输入版本号"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="最新版本"
                               :label-col="{xs: {span: 24},sm: {span: 14}}"
                               :wrapper-col="{xs: {span: 24},sm: {span: 10}}">
              <span style="font-weight: bold">{{ver}}</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="说明" :label-col="labelCol" :wrapper-col="wrapperCol" prop="remarks">
              <a-textarea v-model="model.remarks" placeholder="请输入说明" :rows="2"/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="">
              <fileUpload ref="fileUpload"/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>
  import fileUpload from '@/views/sj/components/fileUpload'
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import {getAction, httpAction} from '@/api/manage'
  import liSelectMould from '../../../../components/liSelectMould'
  import columns from './columns'

  export default {
    name: 'AddVersionForm',
    components: {fileUpload, liSelectMould},
    mixins: [JeecgListMixin],
    props: {
      // 表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      },
      versionDisabled: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        columns: columns(),
        ver: undefined,
        model: {},
        labelCol: {
          xs: {span: 24},
          sm: {span: 4}
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 20}
        },
        rules: {
          version: [
            {required: true, message: '必填项', trigger: 'blur'}
          ]
        },
        confirmLoading: false,
        disableMixinCreated: true,
        url: {
          add: '/sjtb/dataCollectionTemplateVersion/add',
          edit: '/sjtb/dataCollectionTemplateVersion/edit'
        }
      }
    },
    computed: {
      formDisabled() {
        return this.disabled
      }
    },
    created() {
      // 备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model))
    },
    methods: {
      add(record) {
        this.model = Object.assign({}, {templateId: record})
        this.getVer()
      },
      edit(record) {
        this.model = Object.assign({}, record)
        this.getVer()
        this.model.tmList.map((item, index) => {
          item.name = item.fileName
          item.newName = item.newFileName
          item.status = 1
          item.type = 1
          item.uid = item.fileId
        })
        this.$refs.fileUpload.copyFileList = JSON.parse(JSON.stringify(this.model.tmList))
      },
      getVer() {
        getAction('/sjtb/dataCollectionTemplateVersion/getlastdata', {templateId: this.model.templateId}).then((res) => {
          if (res.success) {
            this.ver = res.result[0].version
          }
        })
      },
      submitForm() {
        const that = this
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true
            let httpurl = ''
            let method = ''
            if (!this.model.id) {
              httpurl += this.url.add
              method = 'post'
            } else {
              httpurl += this.url.edit
              method = 'put'
            }
            const data = this.$refs.fileUpload.fileData()
            if (this.model.uploadmodel) {
              this.model.uploadmodel = [...this.model.uploadmodel, ...data]
            } else {
              this.model.uploadmodel = [...data]
            }
            const data2 = JSON.parse(JSON.stringify(this.model))
            if (data2.uploadmodel && data2.uploadmodel.length > 0) {
              for (const item of data2.uploadmodel) {
                delete item.file
                delete item.status
                delete item.uid
              }
            } else {
              that.$message.warning('请上传文件')
              that.confirmLoading = false
              return
            }
            httpAction(httpurl, data2, method).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            }).finally(() => {
              that.confirmLoading = false
            })
          }
        })
      }
    }
  }
</script>
<style scoped>
  .title {
    width: 19.5%;
    text-align: right;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 15px;
    color: #3955a5;
  }

</style>
